<template>
	<view class="content" v-if="show==1">
		<video id="myVideo" :src="url" autoplay="true" class="video"></video>
		
		<view class="zhuti">
			<view class="dao">
				<view @click="qiehuan" data-type="1" :class="type==1?'dao2 dao1':'dao2'">课程</view>
				<view @click="qiehuan" data-type="2" :class="type==2?'dao2 dao1':'dao2'">评论</view>
			</view>
			<view class="zhuti1" :style="'height:'+height+'px;'" v-if="type==1">
			<view class="zhuti2" @click="bofang" :data-index="index" v-for="(vo,index) in video">
				<view :class="vid==vo.id?'zhuti3 zhutiac':'zhuti3'">{{vo.title}}</view>
				<view class="zhuti4">播放</view>
			</view>
			</view>
			<view class="zhuti1" :style="'height:'+height+'px;'" v-if="type==2">
				<view class="comments" v-for="c in comments">
					<view class="comments2">
						<image :src="c.avatar" mode="aspectFit"></image>
						<view class="comments3">
							<view class="comments4">{{c.nickname}}</view>
							<view class="comments5">{{c.createtime}}</view>
						</view>
					</view>
					<view class="comments6">
						{{c.content}}
					</view>
				</view>
				<view class="kong" v-if="!comments[0]">暂无评论</view>
			</view>
		</view>
		
		<view class="bottom" v-if="goods.is_see==0" >
			<view class="bottom3">
				<view class="bottom5">
					<view class="bottom6" @click="buy">去购买</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var app=getApp();
	export default {
		data() {
			return {
				id: 0,
				show:0,
				url:'',
				uid:0,
				vid:0,
				height:0,
				video:[],
				type:1,
				comments:[],
				videoContext:'',
				goods:[]
			}
		},
		onLoad(op) {
			if(app.isBlank(op.id)==true){
				app.error_msg('参数错误');
			}else{
				const uid = uni.getStorageSync('uid');
				if(app.isBlank(uid)==false){
					this.uid=uid;
				}
				var that=this;
				uni.getSystemInfo({
				    success: function (res) {
						console.log(res.windowHeight);
						that.height=res.windowHeight-230-41-52;
				    }
				});
				this.videoContext = uni.createVideoContext('myVideo')
				this.id=op.id;
				
				this.getdata();
			}
		},
		methods: {
			getdata(){
				var that=this;
				uni.showLoading({
				    title: '数据加载中'
				});
				uni.request({
				    url: app.globalData.url+"goods/video",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {id:that.id,uid:that.uid},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							if(res.data.code==-1){
								uni.removeStorageSync('uid');
							}
							
							app.error_msg(res.data.msg);
						}
						that.goods=res.data.data.goods;
						that.comments=res.data.data.comments;
						that.video=res.data.data.video;
						that.vid=res.data.data.video[0].id;
						that.url=res.data.data.video[0].url;
						if(that.goods.is_see==1){
							that.height=parseFloat(that.height)+52;
						}
						that.show=1;
				    }
				});
			},
			qiehuan(e){
				var type=e.currentTarget.dataset.type;
				this.type=type;
			},
			bofang(e){
				var index=e.currentTarget.dataset.index;
				if(this.vid==this.video[index].id){
					return false;
				}
				var that=this;
				const uid = uni.getStorageSync('uid');
				if(app.isBlank(uid)==true){
					uni.showModal({
					    content: '请先进行登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								that.videoContext.pause();
					            uni.navigateTo({
					                url: '/pages/login/login?vio=1'
					            });
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					return false;
				}
				
				if(this.video[0].id!=this.video[index].id && this.goods.is_see==0){
					uni.showModal({
					    content: '该课程您还未购买，不能播放',
						confirmText:'去购买',
					    success: function (res) {
					        if (res.confirm) {
					            that.buy();
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					return false;
				}
				this.videoContext.pause();
				this.url=this.video[index].url;
				this.vid=this.video[index].id;
				this.videoContext.seek(0);
				this.videoContext.play();
			},
			home(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			},
			buy(){
				var that=this;
				const uid = uni.getStorageSync('uid');
				if(app.isBlank(uid)==true){
					uni.showModal({
					    content: '请先进行登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								that.videoContext.pause();
					            uni.navigateTo({
					                url: '/pages/login/login?vio=1'
					            });
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					return false;
				}
				this.videoContext.pause();
				uni.navigateTo({
				    url: '/pages/goods/buy?id='+this.id
				});
			}
		}
	}
</script>

<style>
	.kong{width:100%;text-align: center;margin-top: 100px;}
	.comments6{padding-left: 5px;line-height: 20px;margin-top: 3px;}
	.comments5{width:100%;height:15px;line-height: 12px;font-size: 0.7rem;color:#999;}
	.comments4{width:100%;height:25px;line-height: 28px;overflow: hidden;color:#666;}
	.comments3{width:100%;height:40px;flex:1;}
	.comments2 image{width:35px;height:35px;margin-top: 2.5px;margin-right: 8px;border-radius: 50%;}
	.comments2{width:100%;height:40px;display: flex;}
	.comments{width:94%;padding: 0px 3%;margin-top: 10px;}
	.zhutiac{color:#05c160!important;}
	.dao1{color:#05c160;}
	.zhuti1{width:100%;overflow: auto;}
	.zhuti4{width:50px;height:20px;line-height: 20px;border:1px #999 solid;border-radius: 20px;color:#999;text-align: center;margin-left: 8px;font-size: 0.7rem;margin-top: 7.5px;}
	.zhuti3{width:100%;height:35px;line-height: 35px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;flex:1;}
	.zhuti2{width:94%;padding: 0px 3%;display: flex;height:35px;}
	.zhuti{width:100%;margin-top: 230px;}
	.dao2{width:50%;height:40px;line-height: 40px;text-align: center;float: left;font-size: 1rem;font-weight: 600;}
	.dao{width:100%;height:40px;overflow: hidden;z-index: 9999;border-bottom: 1px #eee solid;}
	.bottom6{width:100%;height:40px;line-height: 40px;text-align: center;color:#fff;background-color: #05c160;}
	.bottom5{width:94%;height:40px;border-radius: 20px;overflow: hidden;margin: 0 auto;margin-top: 5px;}
	.bottom2 image{width:22px;margin-top: 5px;}
	.bottom4{width:100%;height:20px;line-height: 18px;font-size: 0.75rem;}
	.bottom2{width:15%;height:50px;float: left;text-align: center;}
	.bottom3{width:100%;height:50px;float: right;text-align: right;}
	.bottom{width:100%;height:51px;border-top:1px #eee solid;position: fixed;bottom: 0px;z-index: 9999;background-color: #fff;overflow: hidden;}
	.video{width:100%;position: fixed;top:0px;z-index:9999;}
</style>
